<template>
    <div id="key-box">
        <div class="keyboard">
            <!-- <div class="cell" @click="handleControl('59')">
            </div>
            <div class="cell" @click="handleControl('59')"></div> -->
            <div class="cell" @click="handleControl('998')">
                <div class="key">!</div>
            </div>
            <div class="cell" @click="handleControl('77')">
                <div class="key">@</div>
            </div>
            <div class="cell" @click="handleControl('18')">
                <div class="key">#</div>
            </div>
            <div class="cell" @click="handleControl('997')">
                <div class="key">$</div>
            </div>

            <div class="cell" @click="handleControl('996')">
                <div class="key">%</div>
            </div>
            <div class="cell" @click="handleControl('993')">
                <div class="key">?</div>
            </div>
            <div class="cell" @click="handleControl('999')">
                <div class="key">&</div>
            </div>
            <div class="cell" @click="handleControl('17')">
                <div class="key">*</div>
            </div>

            <div class="cell" @click="handleControl('162')">
                <div class="key">(</div>
            </div>
            <div class="cell" @click="handleControl('163')">
                <div class="key">)</div>
            </div>
            <div class="cell" @click="handleControl('995')">
                <div class="key">{</div>
            </div>
            <div class="cell" @click="handleControl('994')">
                <div class="key">}</div>
            </div>
            <div class="cell" @click="handleControl('70')">
                <div class="key">=</div>
            </div>
            <div class="cell" @click="handleControl('25')">
                <div class="key"> <svg t="1690878860914" class="svg-icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2268" width="200" height="200">
                        <path
                            d="M469.333333 106.666667v810.666666a21.333333 21.333333 0 0 1-36.42 15.086667L225.833333 725.333333H53.333333a53.393333 53.393333 0 0 1-53.333333-53.333333V352a53.393333 53.393333 0 0 1 53.333333-53.333333h172.5l207.08-207.086667A21.333333 21.333333 0 0 1 469.333333 106.666667z m146.793334 296.2a21.333333 21.333333 0 0 0-3.526667 29.96 127.366667 127.366667 0 0 1 0 158.346666 21.333333 21.333333 0 0 0 33.493333 26.433334 170.733333 170.733333 0 0 0 0-211.213334 21.333333 21.333333 0 0 0-29.966666-3.526666z m212.213333-19.3A339.393333 339.393333 0 0 0 753.333333 270.666667a346.585333 346.585333 0 0 0-22.046666-20.213334 21.333333 21.333333 0 1 0-27.446667 32.666667c6.666667 5.586667 13.146667 11.553333 19.333333 17.726667C779.6 357.22 810.666667 432.22 810.666667 512s-31.066667 154.78-87.48 211.186667c-6.173333 6.173333-12.666667 12.14-19.333334 17.726666a21.333333 21.333333 0 1 0 27.446667 32.666667 346.585333 346.585333 0 0 0 22.046667-20.213333 341.706667 341.706667 0 0 0 74.98-369.793334z"
                            fill="#fff" p-id="2269"></path>
                    </svg></div>
            </div>

            <div class="cell" @click="handleControl('24')">
                <div class="key"><svg t="1690879135538" class="svg-icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2469" width="200" height="200">
                        <path
                            d="M469.333333 106.666667v810.666666a21.333333 21.333333 0 0 1-36.42 15.086667L225.833333 725.333333H53.333333a53.393333 53.393333 0 0 1-53.333333-53.333333V352a53.393333 53.393333 0 0 1 53.333333-53.333333h172.5l207.08-207.086667A21.333333 21.333333 0 0 1 469.333333 106.666667z m146.793334 296.2a21.333333 21.333333 0 0 0-3.526667 29.96 127.366667 127.366667 0 0 1 0 158.346666 21.333333 21.333333 0 0 0 33.493333 26.433334 170.733333 170.733333 0 0 0 0-211.213334 21.333333 21.333333 0 0 0-29.966666-3.526666zM853.333333 512a340.32 340.32 0 0 0-100-241.333333 346.585333 346.585333 0 0 0-22.046666-20.213334 21.333333 21.333333 0 1 0-27.446667 32.666667c6.666667 5.586667 13.146667 11.553333 19.333333 17.726667C779.6 357.22 810.666667 432.22 810.666667 512s-31.066667 154.78-87.48 211.186667c-6.173333 6.173333-12.666667 12.14-19.333334 17.726666a21.333333 21.333333 0 1 0 27.446667 32.666667 346.585333 346.585333 0 0 0 22.046667-20.213333 340.32 340.32 0 0 0 100-241.333334z m133.173334-192.666667a508.806667 508.806667 0 0 0-112.466667-169.386666 518.346667 518.346667 0 0 0-57.533333-49.653334 21.333333 21.333333 0 0 0-25.42 34.273334 474.246667 474.246667 0 0 1 52.78 45.553333c182.993333 182.993333 182.993333 480.74 0 663.733333a474.853333 474.853333 0 0 1-52.78 45.553334 21.333333 21.333333 0 0 0 25.413333 34.273333 519.026667 519.026667 0 0 0 57.54-49.653333 512.546667 512.546667 0 0 0 112.466667-554.666667z"
                            fill="#fff" p-id="2470"></path>
                    </svg></div>
            </div>
            <div class="cell image" @click="handleShot">
                <!-- <div class="key">实时普通截图</div> -->
            </div>
            <div class="cell" @click="handleControl('68')">
                <div class="key">`</div>
            </div>
            <div class="cell" @click="handleControl('8')">
                <div class="key">1</div>
            </div>
            <div class="cell" @click="handleControl('9')">
                <div class="key">2</div>
            </div>
            <div class="cell" @click="handleControl('10')">
                <div class="key">3</div>
            </div>
            <div class="cell" @click="handleControl('11')">
                <div class="key">4</div>
            </div>
            <div class="cell" @click="handleControl('12')">
                <div class="key">5</div>
            </div>
            <div class="cell" @click="handleControl('13')">
                <div class="key">6</div>
            </div>
            <div class="cell" @click="handleControl('14')">
                <div class="key">7</div>
            </div>
            <div class="cell" @click="handleControl('15')">
                <div class="key">8</div>
            </div>
            <div class="cell" @click="handleControl('16')">
                <div class="key">9</div>
            </div>
            <div class="cell" @click="handleControl('7')">
                <div class="key">0</div>
            </div>
            <div class="cell" @click="handleControl('69')">
                <div class="key">-</div>
            </div>
            <div class="cell" @click="handleControl('81')">
                <div class="key">+</div>
            </div>
            <div class="cell backspace" @click="handleControl('67')">
                <div class="key">Backspace</div>
            </div>
            <div class="cell">
                <!-- <div class="key">Ins</div> -->
            </div>
            <div class="cell">
                <!-- <div class="key">Home</div> -->
            </div>
            <div class="cell">
                <!-- <div class="key">PgUp</div> -->
            </div>
            <div class="cell tab" @click="handleControl('61')">
                <div class="key">Tab</div>
            </div>
            <div class="cell" @click="handleControl('45')">
                <div class="key">Q</div>
            </div>
            <div class="cell" @click="handleControl('51')">
                <div class="key">W</div>
            </div>
            <div class="cell" @click="handleControl('33')">
                <div class="key">E</div>
            </div>
            <div class="cell" @click="handleControl('46')">
                <div class="key">R</div>
            </div>
            <div class="cell" @click="handleControl('48')">
                <div class="key">T</div>
            </div>
            <div class="cell" @click="handleControl('53')">
                <div class="key">Y</div>
            </div>
            <div class="cell" @click="handleControl('49')">
                <div class="key">U</div>
            </div>
            <div class="cell" @click="handleControl('37')">
                <div class="key">I</div>
            </div>
            <div class="cell" @click="handleControl('43')">
                <div class="key">O</div>
            </div>
            <div class="cell" @click="handleControl('44')">
                <div class="key">P</div>
            </div>
            <div class="cell" @click="handleControl('71')">
                <div class="key">[</div>
            </div>
            <div class="cell" @click="handleControl('72')">
                <div class="key">]</div>
            </div>
            <div class="cell" @click="handleControl('73')">
                <div class="key">\</div>
            </div>
            <div class="cell">
                <!-- <div class="key">Del</div> -->
            </div>
            <div class="cell">
                <!-- <div class="key">End</div> -->
            </div>
            <div class="cell">
                <!-- <div class="key">PgDn</div> -->
            </div>
            <div class="cell caps" @click="handleControl('115')">
                <div class="key">Caps</div>
            </div>
            <div class="cell" @click="handleControl('29')">
                <div class="key">A</div>
            </div>
            <div class="cell" @click="handleControl('47')">
                <div class="key">S</div>
            </div>
            <div class="cell" @click="handleControl('32')">
                <div class="key">D</div>
            </div>
            <div class="cell" @click="handleControl('34')">
                <div class="key">F</div>
            </div>
            <div class="cell" @click="handleControl('35')">
                <div class="key">G</div>
            </div>
            <div class="cell" @click="handleControl('36')">
                <div class="key">H</div>
            </div>
            <div class="cell" @click="handleControl('38')">
                <div class="key">J</div>
            </div>
            <div class="cell" @click="handleControl('39')">
                <div class="key">K</div>
            </div>
            <div class="cell" @click="handleControl('40')">
                <div class="key">L</div>
            </div>
            <div class="cell" @click="handleControl('74')">
                <div class="key">;</div>
            </div>
            <div class="cell" @click="handleControl('75')">
                <div class="key">'</div>
            </div>
            <div class="cell enter" @click="handleControl('23')">
                <div class="key">Enter</div>
            </div>
            <div class="cell"></div>
            <div class="cell" @click="handleControl('19')">
                <div class="key">↑</div>
            </div>
            <div class="cell"></div>
            <div class="cell shift-left" @click="handleControl('59')">
                <div class="key">Shift</div>
            </div>
            <div class="cell" @click="handleControl('54')">
                <div class="key">Z</div>
            </div>
            <div class="cell" @click="handleControl('52')">
                <div class="key">X</div>
            </div>
            <div class="cell" @click="handleControl('31')">
                <div class="key">C</div>
            </div>
            <div class="cell" @click="handleControl('50')">
                <div class="key">V</div>
            </div>
            <div class="cell" @click="handleControl('30')">
                <div class="key">B</div>
            </div>
            <div class="cell" @click="handleControl('42')">
                <div class="key">N</div>
            </div>
            <div class="cell" @click="handleControl('41')">
                <div class="key">M</div>
            </div>
            <div class="cell" @click="handleControl('55')">
                <div class="key">,</div>
            </div>
            <div class="cell" @click="handleControl('56')">
                <div class="key">.</div>
            </div>
            <div class="cell" @click="handleControl('76')">
                <div class="key">/</div>
            </div>
            <div class="cell shift-right" @click="handleControl('59')">
                <div class="key">Shift</div>
            </div>
            <!-- <div class="cell" @click="handleControl('59')"></div> -->

            <div class="cell" @click="handleControl('21')">
                <div class="key">←</div>
            </div>
            <div class="cell" @click="handleControl('23')">
                <div class="key">ok</div>
            </div>
            <div class="cell" @click="handleControl('22')">
                <div class="key">→</div>
            </div>
            <!-- <div class="cell" @click="handleControl('59')"></div> -->
            <div class="cell">
                <!-- <div class="key">Ctrl</div> -->
            </div>
            <div class="cell">
                <!-- <div class="key">Win</div> -->
            </div>
            <div class="cell">
                <!-- <div class="key">Alt</div> -->
            </div>
            <div class="cell space" @click="handleControl('62')">
                <div class="key"></div>
            </div>

            <div class="cell" @click="handleControl('4')">
                <div class="key">
                    <svg t="1690880324925" class="svg-icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4643" width="200" height="200">
                        <path
                            d="M875.1 323.6C806.6 257.9 715 221.7 617.2 221.7H86.1L237.2 76.2c9.1-8.8 9.4-23.2 0.6-32.3-8.8-9.1-23.2-9.4-32.3-0.6l-166.1 160c-10.9 10.5-16.8 24.6-16.7 39.9-1.1 16.7 4.6 31.9 16 42.8l166.1 155.2c9.2 8.6 23.7 8.1 32.3-1.1 8.6-9.2 8.1-23.7-1.1-32.3L85.7 267.4h531.5c179.2 0 319.6 135.9 319.6 309.3 0 176.3-133 309.3-309.3 309.3l-315.9-0.6c-12.6 0-22.9 10.2-22.9 22.8 0 12.6 10.2 22.9 22.8 22.9l315.9 0.6c97.4 0 187.3-36.3 253.1-102.3 65.7-65.8 101.9-155.6 101.9-252.8 0.1-96.6-38-186.5-107.3-253z"
                            p-id="4644" fill="#fff"></path>
                    </svg>
                </div>
            </div>
            <div class="cell" @click="handleControl('59')">
                <div class="key">
                    <svg t="1690880422899" class="svg-icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5660" width="200" height="200">
                        <path
                            d="M515.2 224c-307.2 0-492.8 313.6-492.8 313.6s214.4 304 492.8 304 492.8-304 492.8-304S822.4 224 515.2 224zM832 652.8c-102.4 86.4-211.2 140.8-320 140.8s-217.6-51.2-320-140.8c-35.2-32-70.4-64-99.2-99.2-6.4-6.4-9.6-12.8-16-19.2 3.2-6.4 9.6-12.8 12.8-19.2 25.6-35.2 57.6-70.4 92.8-102.4 99.2-89.6 208-144 329.6-144s230.4 54.4 329.6 144c35.2 32 64 67.2 92.8 102.4 3.2 6.4 9.6 12.8 12.8 19.2-3.2 6.4-9.6 12.8-16 19.2C902.4 585.6 870.4 620.8 832 652.8z"
                            p-id="5661" fill="#fff"></path>
                        <path
                            d="M512 345.6c-96 0-169.6 76.8-169.6 169.6 0 96 76.8 169.6 169.6 169.6 96 0 169.6-76.8 169.6-169.6C681.6 422.4 604.8 345.6 512 345.6zM512 640c-67.2 0-121.6-54.4-121.6-121.6 0-67.2 54.4-121.6 121.6-121.6 67.2 0 121.6 54.4 121.6 121.6C633.6 582.4 579.2 640 512 640z"
                            p-id="5662" fill="#fff"></path>
                    </svg>
                </div>
            </div>
            <div class="cell" @click="handleControl('112')">
                <div class="key">
                    <svg t="1690880121897" class="svg-icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3676" width="200" height="200">
                        <path
                            d="M757.810429 373.751333 325.645708 373.751333l0-83.895759c0-103.694687 81.507362-184.922686 185.559183-184.922686 78.121242 0 146.053424 46.74565 173.062568 119.090329 3.865028 10.352789 15.384385 15.609513 25.742291 11.746532 10.351766-3.866051 15.609513-15.390525 11.744485-25.742291C688.844707 121.877815 606.198405 64.918545 511.204891 64.918545c-61.918211 0-119.246895 23.662933-161.423483 66.63156-41.3692 42.142819-64.151066 98.363262-64.151066 158.305469l0 83.895759-20.007683 0c-60.774155 0-110.042255 49.267077-110.042255 110.042255l0 366.139981c0 60.774155 49.267077 110.042255 110.042255 110.042255l492.187769 0c60.775178 0 110.042255-49.267077 110.042255-110.042255L867.852684 483.793588C867.852684 423.01841 818.585607 373.751333 757.810429 373.751333zM827.837318 849.933569c0 38.674834-31.352055 70.02689-70.02689 70.02689L265.62266 919.960459c-38.674834 0-70.02689-31.352055-70.02689-70.02689L195.59577 483.793588c0-38.674834 31.352055-70.02689 70.02689-70.02689l492.187769 0c38.674834 0 70.02689 31.352055 70.02689 70.02689L827.837318 849.933569z"
                            fill="#fff" p-id="3677"></path>
                        <path
                            d="M509.715981 583.832002c-11.048637 0-20.007683 8.959046-20.007683 20.007683l0 110.042255c0 11.048637 8.958022 20.007683 20.007683 20.007683s20.007683-8.958022 20.007683-20.007683L529.723663 603.839685C529.723663 592.790024 520.765641 583.832002 509.715981 583.832002z"
                            fill="#fff" p-id="3678"></path>
                    </svg>
                </div>
            </div>
            <div class="cell" @click="handleControl('131')">
                <div class="key">F1</div>
            </div>
            <div class="cell">
            </div>
            <div class="cell" @click="handleControl('20')">
                <div class="key">↓</div>
            </div>
            <div class="cell">
            </div>
        </div>
        <!-- <div id="shot-img">
            <img :src="imgSrc" alt="" />
        </div> -->
    </div>
</template>

<script>
import {
    remoteKeyboard,
    downloadScreenshotFile,
} from "@/api/allDevice/allDevice";
export default {
    props: {
        pageData: {
            type: Object,
            default: {},
        },

    },
    data() {
        return {
            imgSrc: null,
        }
    },
    methods: {
        // 截图功能
        async handleShot() {
            let res = await downloadScreenshotFile({
                code: this.pageData.code,
                type: '1',
            });
            // if (res.code == 200) {
            this.imgSrc = "data:image/png;base64," + res;
            console.log("res: ", res);
        },

        // 按键控制
        async handleControl(val) {
            let _data = {
                code: this.pageData.code,
                key: val
            };
            let res = await remoteKeyboard(_data)
        }
    }
}
</script>

<style  lang='scss' scoped>
#key-box {
    margin-top: 120px;
    padding: 50px;
    // height: 400px;
    //   background-color: #55b9f3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#shot-img {
    width: 30%;

    >img {
        width: 100%;
    }
}

.keyboard {
    width: 960px;
    height: 280px;
    padding: 10px;
    border-radius: 10px;
    // background: #55b9f3;
    box-shadow: -2px -2px 10px #489dcf, 2px 2px 10px #ddd;
    background-color: rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: repeat(6, 1fr);
}

.cell {
    padding: 4px;
}

.key {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    // background: linear-gradient(315deg, #4da7db, #5bc6ff);
    box-shadow: -1px -1px 10px #489dcf,
        1px 1px 10px #62d5ff;
    transition: background .3s;
    cursor: pointer;
    user-select: none;
}

.key:active {
    background: linear-gradient(315deg, #5bc6ff, #4da7db);
}

.backspace {
    grid-column: 14 / 16;
}

.image {
    grid-column: 16 / 20;
}

.tab {
    grid-column: 1 / 3;
}

.caps {
    grid-column: 1 / 3;
}

.enter {
    grid-column: 14 / 16;
}

.shift-left {
    grid-column: 1 / 4;
}

.shift-right {
    grid-column: 14 / 16;
}

.space {
    grid-column: 4 / 12;
}

.svg-icon {
    width: 20px;
    height: 20px;
}
</style>